<template>
  <div>
    <Breadcrumb v-if="items" :style="{height:'40px',lineHeight:'40px'}">
      <transition v-for="(item,index) in items" :key="uuid()+item">
        <BreadcrumbItem
          v-if="!item.to || (item.to && item.to.indexOf('http') != 0)"
          :to="item.to"
          :style="{fontSize:initFontSize-index*2+'px'}"
        >{{item.title}}</BreadcrumbItem>
        <BreadcrumbItem
          v-if="item.to && item.to.indexOf('http') == 0"
          :style="{fontSize:initFontSize-index*2+'px'}"
        >
          <a :href="item.to">{{item.title}}</a>
        </BreadcrumbItem>
      </transition>
    </Breadcrumb>
  </div>
</template>

<script>
import { Breadcrumb, BreadcrumbItem, Divider } from "view-design";
import Uuid from "uuid";
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  components: { Breadcrumb, BreadcrumbItem, Divider },
  data: function() {
    return {
      initFontSize: 18
    };
  },
  methods: {
    uuid: function() {
      return Uuid.v1();
    }
  }
};
</script>

<style>
</style>
